<template>
    <section class="w-full">
        <p class="page-title">{{this.$route.name}}</p>
        <el-row class="w-full h-full">
            <el-col :span="8" class="b-r h-full" style="height: 80vh; overflow: auto">
                <div style="margin: 20px;text-align: center">
                    <el-button type="primary" icon="el-icon-plus" @click="releaseNotice">发布通知</el-button>
                </div>
                <el-timeline style="margin: 5px" :reverse="timeLineReverse">
                    <el-timeline-item
                            v-for="(notice, index) in notices"
                            :key="index"
                            :type="setType(notice)"
                            :icon="setIcon(notice)"
                            size="large"
                            :timestamp="notice.noticeTime">
                        <span @click="clickNoitce(notice)" style="cursor:pointer">{{notice.noticeTitle}}</span>
                    </el-timeline-item>
                </el-timeline>
            </el-col>
            <el-col :span="15" :offset="1">
                <el-form :model="selectedNoticeForm" status-icon ref="selectedNoticeForm" label-width="100px" class="demo-dynamic" v-show="showSelectedNoticeForm">
                    <div style="font-size: 18px; text-align: center;margin: 20px" :style="{color:selectedNoticeForm.isImportant==1?'red':'#409eff'}">
                        <span v-show="selectedNoticeForm.isImportant==1">重要</span>通知
                    </div>
                    <el-form-item label="通知标题" :label-width="formLabelWidth">
                        <el-input v-model="selectedNoticeForm.noticeTitle" autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="通知内容" :label-width="formLabelWidth">
                        <el-input v-model="selectedNoticeForm.noticeContent" autocomplete="off" type="textarea" readonly="readonly" rows="10"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-dialog title="发布通知" :visible.sync="showNoticeReleaseDialog">
            <el-form :model="noticeReleaseForm" status-icon ref="noticeReleaseForm" label-width="100px" class="demo-dynamic" :rules="rules">
                <el-form-item label="重要通知" :label-width="formLabelWidth" prop="isImportant">
                    <el-switch v-model="noticeReleaseForm.isImportant" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="通知标题" :label-width="formLabelWidth" prop="noticeTitle">
                    <el-input v-model="noticeReleaseForm.noticeTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通知内容" :label-width="formLabelWidth" prop="noticeContent">
                    <tinymce v-model="noticeReleaseForm.emailContent"></tinymce>
                </el-form-item>
                <el-form-item label="通知机构" :label-width="formLabelWidth" v-model="selectedOrgNames" prop="selectedOrgNames">
                    <el-select placeholder="请选择" v-model="selectedOrgNames" multiple >
                        <el-option label="1" value="1">
                            <el-tree  ref="tree"
                                      accordion
                                      show-checkbox
                                      :data="orgData"
                                      :props="defaultProps"
                                      @check="clickCheck"
                                      node-key="id">
                            </el-tree>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitNoticeReleaseForm('noticeReleaseForm')">发布</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
    import tinymce from '@/components/tinymce/tinymce.vue'

    export default {
        name: "noticeManager",
        components: {
            tinymce
        },
        created() {
            this.queryOrgs();
            this.queryNotices();
        },
        data() {
            let validatePass = (rule, value, callback) => {
                if (this.selectedOrgNames.length === 0) {
                    callback(new Error('请选择通知机构'));
                } else {
                    callback();
                }
            }
            return {
                formLabelWidth: '80px',
                showNoticeReleaseDialog: false,
                timeLineReverse: true,
                orgData: [],
                showSelectedNoticeForm: false,
                noticeReleaseForm: {
                    isImportant: '0',
                    noticeTitle: '',
                    noticeContent: '',
                    orgIds: []
                },
                selectedNoticeForm: {
                    isImportant: '0',
                    noticeTitle: '',
                    noticeContent: '',
                    orgIds: []
                },
                selectedOrgNames: [],
                noticeForm: {

                },
                notices: [],
                rules: {
                    noticeTitle: [
                        {
                            required: true,
                            message: '请输入通知标题',
                            trigger: 'blur'
                        },
                    ],
                    noticeContent: [
                        {
                            required: true,
                            message: '请输入通知内容',
                            trigger: 'blur'
                        },
                    ],
                    selectedOrgNames: [
                        {
                            validator: validatePass,
                        }
                    ],

                },
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            queryNotices() {
                this.$http({
                    url: '/notice/notices',
                    method: 'get',
                }).then((response) => {
                    this.notices = response;
                })
            },
            queryOrgs() {
                this.$http({
                    url: '/org/orgs',
                    method: 'get',
                    params: {}
                }).then((response) => {
                    this.orgData = response;
                })
            },
            releaseNotice() {
                if(this.$refs.tree){
                    this.$refs.tree.setCheckedKeys([]);
                }
                this.selectedOrgNames = [];
                this.noticeReleaseForm.orgIds = [];
                if(this.$refs['noticeReleaseForm']){
                    this.$refs['noticeReleaseForm'].resetFields()
                }
                this.showNoticeReleaseDialog = true;
            },
            addNewNotice() {
                this.$http({
                    url: '/notice/notice',
                    method: 'post',
                    data: this.$qs.stringify(this.noticeReleaseForm)
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '发布成功!'
                    });
                    this.showNoticeReleaseDialog = false;
                    this.queryNotices();
                })
            },
            submitNoticeReleaseForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addNewNotice();
                    } else {
                        return false;
                    }
                });
            },
            clickCheck(currentNode, selectedNode) {
                this.noticeReleaseForm.orgIds = [];
                this.selectedOrgNames = [];
                let checkedNodes = selectedNode.checkedNodes;
                for(let checkedNode of checkedNodes){
                    this.selectedOrgNames.push(checkedNode.label);
                }
                this.noticeReleaseForm.orgIds = selectedNode.checkedKeys;
            },
            clickNoitce(data) {
                this.showSelectedNoticeForm = true;
                this.selectedNoticeForm = data;
                let isRead = false;
                return new Promise((resolve)=>{
                    if(data.isRead!='1'){
                        isRead = true;
                        resolve(isRead);
                    }
                }).then(()=>{
                    if(isRead){
                        let id = data.noticeId;
                        this.$http({
                            url: '/notice-user/updateByNoticeIdAndUser',
                            method: 'put',
                            data: this.$qs.stringify({
                                noticeId: id
                            })
                        }).then(() => {
                            this.queryNotices();
                        })
                    }
                })
            },
            setType(data) {
                if(data.isImportant === '1'){
                    return 'danger';
                }else{
                    return 'primary'
                }
            },
            setIcon(data) {
                if(data.isRead === '1'){
                    return 'el-icon-check';
                }else{
                    return ''
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>

    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-select-dropdown__item.selected{
        font-weight: normal;
    }
    ul li >>>.el-tree .el-tree-node__content{
        height:auto;
        padding: 0 20px;
    }
    .el-tree-node__label{
        font-weight: normal;
    }
    .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label {
        color: #606266;
        font-weight: normal;
    }
</style>